﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Coronary Artery Plot | ParameterZ.com</title>

    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>

    <script src="../js/jquery.flot.js" type="text/javascript"></script>

    <script src="../js/excanvas.min.js" type="text/javascript"></script>
    <script src="../js/ca_defs.js" type="text/javascript"></script>

    <link href="../style/ie.css" rel="stylesheet" type="text/css" />
    <link href="../style/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
    <h1>
        Coronary Artery Plot: <span id="ca"></span>&nbsp;vs. BSA
    </h1>
    <h2>Data Set: "<span id="ref"></span>"</h2>

    <div id="placeholder" style="width: 600px; height: 400px">
    </div>
    <hr class="space" />
    <hr class="span-15 last" />
    <hr class="space" />
    <div class="quiet">
    <p>Axes: coronary artery (mm) vs. BSA (m<sup>2</sup>)</p>
    <p><span id="ca2"></span>:&nbsp;<span id="score"></span>; BSA: <span id="bsa"></span></p>
    <p>Generated: <span id="date"></span></p>
    </div>
</div>
</body>

<script type="text/javascript">
    var LIMIT = 2; //global z-score for upper/lower limits
    var BSA = 0;
    var uln = [];
    var lln = [];
    var urlParams = {};
    (function() {
        var e,
        a = /\+/g,  // Regex for replacing addition symbol with a space
        r = /([^&;=]+)=?([^&;]*)/g,
        d = function(s) { return decodeURIComponent(s.replace(a, " ")); },
        q = window.location.search.substring(1);

        while (e = r.exec(q))
            urlParams[d(e[1])] = d(e[2]);
    })();
    function getData(ref, site) {
        var ca = window[ref][site]; //only way I could think of to access the objects without using 'eval()'; globals live in the window object.. good reason to NAMESPACE my stuff(!)
        for (var i = 0.1; i <= 2.1; i += 0.1) {
            var ul = [];
            var ll = [];
            ul.push(i);
            ll.push(i)
            BSA = i;
            ul.push(ca.uln().toFixed(3));
            ll.push(ca.lln().toFixed(3));
            uln.push(ul);
            lln.push(ll);
        }
        return;
    }
    $(document).ready(function() {
        var site = (urlParams['site']);
        var ref = (urlParams['ref']);
        var plot_bsa = (urlParams['bsa']);
        var plot_score = (urlParams['score']);
        var z = (urlParams['z']);
        $('#ca, #ca2').text(site.toUpperCase());
        $('#ref').text(ref.toUpperCase());
        $('#score').text(plot_score);
        $('#bsa').text(plot_bsa);
        $('#date').text(Date());
        $(document).attr('title', site.toUpperCase() + ' PLOT' + ' | ' + ref.toUpperCase());
        getData(ref, site);
        var ulnData = { data: uln, label: "+2 SD", lines: { show: true, fill: true }, color: 1 };
        var llnData = { data: lln, label: "-2 SD", lines: { show: true, fill: true, fillColor: "rgba(255,255,255,0.99)" }, color: 1 };
        var myData = {
            data: [[+plot_bsa, +plot_score]], //data is 'an array of arrays'-- I always forget the outer array...
            lines: { show: false },
            points: { show: true },
            color: "#000000",
            label: 'Z-score = ' + z
        };

        var options = {
            yaxis: { min: 0 },
            xaxis: { tickDecimals: 1 },
            grid: { show: true, aboveData: true },
            legend: { position: 'se' }
        };
        $.plot($("#placeholder"), [ulnData, llnData, myData], options);
    });
    
</script>

</html>
